import React, {Component} from 'react';
import { TabBar} from 'antd-mobile'
import PropTypes from 'prop-types'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

import {withRouter} from 'react-router-dom'

const Item = TabBar.Item
class NavFooter extends Component {
    static propTypes = {
        navList: PropTypes.array.isRequired,
        unReadCount: PropTypes.number.isRequired,
    }

    render() {
        let navList = this.props.navList.filter( nav => !nav.hide)
        let {pathname} = this.props.location
        return (
            <div>
                <TabBar>
                    {
                        navList.map( (nav,index) => {
                          return  <Item key={nav.path}
                                  title={nav.text}
                                  badge={nav.path === '/message' ? this.props.unReadCount : 0}
                                  icon ={ <FontAwesomeIcon color='#999' icon={nav.icon}/>}
                                  selectedIcon={ <FontAwesomeIcon  color='#11b2ce' icon={nav.icon}/>}
                                  selected={pathname === nav.path}
                                  onPress={ () => {this.props.history.replace(nav.path)}}
                            >
                            </Item>
                        })
                    }
                </TabBar>
            </div>
        );
    }
}

export default withRouter(NavFooter);